import { Kwidget } from "../kWidget";
import "../kIcon/index";
export class Kinput extends Kwidget {
  options = {};
  constructor(options = { el: document.body }) {
    super();
    this.options = options;
    const shadowRoot = this.attachShadow({ mode: "open" });
    this.render();
  }

  static get observedAttributes() {
    return ["value", "type", "placeholder"];
  }

  connectedCallback() {
    this.logInfo('k-input挂载成功');       
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    // console.log(attrName, oldVal, newVal);
  }

  insertToElement(element) {
    const el = element ? element : this.options?.el;
    el && el instanceof HTMLElement ? "" : (el = document.body);
    el.appendChild(this);
  }

  get placeholder() {
    return this.getAttribute("placeholder") || "请输入...";
  }
  set placeholder(val) {
    this.setAttribute("placeholder", val);
  }

  // Event init
  registerEvent(evtType, callback) {
    const instance = this.shadowRoot.getElementById("k-input");
    instance.addEventListener(evtType,event => callback(event));
  }

  async render() {
    let template = document.createElement("template");
      template.innerHTML = `
        <div class="k-input-main">
            <input id="k-input" class="k-input" type="text" placeholder="${this.placeholder}" />
            <k-icon name="search" size="20" color="#666" class="k-input-icon" ></k-icon>
        </div>`;
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    const cssText = await this.loadCssText("./kInput/index.css");
    this.initStyle(cssText);
  }
}

customElements.define("k-input", Kinput);
